<template>
  <div class="app-container">
  <!-- 添加或修改车辆管理对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-row :gutter="20">
        <el-col :span="8" :xs="24">
          <el-form-item label="项目名称" prop="communityId">
            <el-select v-model="form.communityId" placeholder="请选择项目名称">
              <el-option v-for="item in communityOptions"
                         :key="item.id"
                         :label="item.communityName"
                         :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="所属车场" prop="parkingId">
            <el-select v-model="form.parkingId" placeholder="请选择车场">
              <el-option v-for="item in parkIngOptions"
                         :key="item.parkingId"
                         :label="item.parkingName"
                         :value="item.parkingId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="所属车位" prop="carportId">
            <el-select v-model="form.carportId" placeholder="请选择车位">
              <el-option v-for="item in carportOptions"
                         :key="item.carportId"
                         :label="item.carportName"
                         :value="item.carportId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="车牌号" prop="plateNum">
            <el-input v-model="form.plateNum" placeholder="请输入车牌号" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="车牌品牌" prop="vehicleBrand">
            <el-input v-model="form.vehicleBrand" placeholder="请输入车牌品牌" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="车辆识别码" prop="vehicleDiscern">
            <el-input v-model="form.vehicleDiscern" placeholder="请输入车辆识别码" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="生效时间" prop="takeTime">
            <el-date-picker clearable size="small"
                            v-model="form.takeTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择生效时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="失效时间" prop="loseTime">
            <el-date-picker clearable size="small"
                            v-model="form.loseTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择失效时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="图片" prop="vehicleImg">
            <ImageUpload
              v-model="form.vehicleImg"
              @handleUploadSuccess="(row)=>this.form.vehicleImg = row.fileInfoPath"
              @removeImage="(row)=>this.form.vehicleImg = ''"
            />
          </el-form-item>
        </el-col>
        <!--    <el-col :span="8" :xs="24">
                <el-form-item label="价格" prop="totalPrice">
                  <el-input v-model="form.totalPrice" placeholder="请输入价格" />
                </el-form-item>
            </el-col>-->
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" v-hasPermi="['property:vehicle:edit']">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
  import { getVehicle, addVehicle, updateVehicle,listVehicle } from "@/api/property/vehicle";
  import {getCarport,listCarport} from "@/api/property/carport";
  import { listParking} from "@/api/property/parking";
  import { listCommunity} from "@/api/property/community";
    export default {
        name: "addForm",
      data() {
        return {
          // 遮罩层
          loading: true,
          // 导出遮罩层
          exportLoading: false,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 车辆管理表格数据
          vehicleList: [],
          communityOptions:[],
          parkIngOptions:[],
          carportOptions:[],
          currentNode:{},
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          communityId: null,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            plateNum: null,
            vehicleBrand: null,
          },
          ownerColumns:[
            {title:'小区名称',key:'communityName',type:'',width:'',isSearch:true},
            {title:'客户名称',key:'customName',type:'',width:'',isSearch:false},
            {title:'手机号',key:'cellPhoneNumber',type:'',width:'',isSearch:false},
          ],
          // 表单参数
          form: {},
          // 表单校验
          rules: {
            communityId: [
              { required: true, message: "项目名称不能为空", trigger: "blur" }
            ],
            parkingId: [
              { required: true, message: "车场不能为空", trigger: "blur" }
            ],
            carportId: [
              { required: true, message: "车位不能为空", trigger: "blur" }
            ],
            ownerName: [
              { required: true, message: "车主不能为空", trigger: "blur" }
            ],
            plateNum: [
              { required: true, message: "车牌号不能为空", trigger: "blur" }
            ]
          }
        }
      },
      watch: {
        'form.communityId'(v) {
          this.ParkIngList();
        },
        'form.parkingId'(v) {
          this.carportList();
        }
      },
      created() {
        this.CommunityList();
      },
      methods: {
        show(option) {
          this.reset();
          this.disabled = option.type == 'VIEW'
          if (option.type == 'ADD') {
            this.open = true;
            this.title = "新增车辆管理";
            getCarport(option.currentNode.id).then(res => {
              this.form.communityId = res.data.communityId
              this.form.parkingId = res.data.parkingId
              this.form.carportId = res.data.carportId
            })
          }else if (option.type == 'UPDATE' || option.type == 'VIEW'){
            getVehicle(option.id).then(response => {
              this.form = response.data;
              if (option.type == 'VIEW') {
                this.title = "查看车位管理";
              } else {
                this.title = "修改车位管理";
              }
              this.open = true;
            });
          }
        },
        CommunityList(){
          listCommunity().then(response => {
            this.communityOptions = response.rows;
          })
        },
        ParkIngList(){
          listParking({'communityId':this.form.communityId}).then(response => {
            this.parkIngOptions = response.rows;
          })
        },
        carportList(){
          listCarport({'parkingId':this.form.parkingId}).then(response => {
            this.carportOptions = response.rows;
          })
        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
          this.$emit("ok")
        },
        // 表单重置
        reset() {
          this.form = {
            communityId: null,
            vehicleId: null,
            parkingId: null,
            carportId: null,
            plateNum: null,
            vehicleBrand: null,
            vehicleDiscern: null,
            ownerId: null,
            takeTime: null,
            loseTime: null,
            vehicleImg: null,
            totalPrice: null,
            deptId: null,
            ancestors: null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            ownerName:null,
            name:'cc'
          };
          this.resetForm("form");
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.vehicleId != null) {
                updateVehicle(this.form).then(response => {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                });
              } else {
                listVehicle({'carportId': this.form.carportId}).then(response =>{
                  if (response.rows.length==0){
                    addVehicle(this.form).then(response => {
                      this.msgSuccess("新增成功");
                      this.open = false;
                      this.cancel()
                    });
                  }else {
                    this.$message.error("该车位已绑定车辆");
                    return;
                  }
                })

              }
            }
          });
        },
      }
    }
</script>

<style scoped>

</style>
